|
打印功能vue 插件$print
1. 使用div进行布局-table表格调试会比较困难/ html部分 至于安装$print组件可以到百度上找、分享一下打印的想法。我使用的时候组件已经安装好，所有哈哈哈自行百度
打印
分支机构名称
分销订单
客户名称: {{ MainData.contactor }}
联系电话 {{ MainData.contacttel }}
单号 {{ MainData.billcode }}
联系人 {{ MainData.contact }}
联系手机 {{ MainData.contactphone }}
下单日期 {{ MainData.billdate }}
客户地址
{{
MainData.address1 +
"/" +
MainData.address2 +
"/" +
MainData.address3 +
"/" +
MainData.address4
}}
交货日期 {{ MainData.revdate }}
说明 {{ MainData.remark }}
订单明细
序号
货品编码
货品名称
规格
颜色
数量
备注
{{ item.goods_code }}
{{ item.goods_name }}
{{ item.specs }}
{{ item.colour_name }}
{{ item.unitquantity }}
{{ item.remark }}
合计：{{ totalNum }}
2. js部分
data() {
return {
vals: [],//表格数据
pagenum: 0,
};
},
computed: {
// 计算总数量
totalNum() {
let count = 0;
for (let item of this.vals) {
count += parseInt(item.unitquantity);
}
return count;
}
methods: {
// 获取表格中选中的数据
handleSelectionChange(val) {
this.vals = val;
console.log(this.vals);
},
// 打印
handlePrint() {
if (this.vals.length == 0) {
this.pagenum = 1;
console.log(this.pagenum);
} else {
// 页数
this.pagenum = Math.ceil(this.vals.length / 20);
console.log(this.pagenum);
}
setTimeout(() => {
// 打印
this.$print(this.$refs.stamp);
}, 500);
},
}
3.css核心部分
@media print {
div.content {
page-break-after: always;
}
}
|